<template>
  <div class="w-full h-full flex justify-center items-center">
    <div class="w-[375px] h-[585px] rounded-[4px] bg-[#fff] main">
      <div class="w-full h-full flex flex-col justify-center items-center px-[30px] emptybox" v-if="!componentList.length">
        <div class="imgbox">
          <img :src="emptyImage" class="w-full h-full object-cover" />
        </div>
        <div class="text-[16px] text-[#ccc] tit">添加需要的模板或组件</div>
        <div class="text-[12px] text-[#ccc] subtit">可以从左侧点击或拖拽</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import emptyImage from '@/assets/site/empty.png';

const componentList = ref([]);
</script>

<style lang="scss" scoped>
.main {
  -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
}
</style>
